<template>
    <div class="app_container">
        <el-button v-role="['/umsRole/add']" type="primary" @click="openAdd" style="margin-bottom: 10px;">新增角色</el-button>

        <!-- 列表 -->
        <el-table :data="tableData" row-key="id" border>
            <el-table-column prop="id" label="角色id" width="80"></el-table-column>
            <el-table-column prop="name" label="角色名称" width="220"></el-table-column>
            <el-table-column prop="shortName" label="英文简称" width="200"></el-table-column>
            <el-table-column prop="description" label="描述" width="400"></el-table-column>
            <el-table-column prop="adminCount" label="拥有该角色的人员数量" width="110"></el-table-column>
            <el-table-column prop="status" label="状态" width="140">
                <template slot-scope="scope">{{ scope.row.status == 'DISABLED' ? '已禁用' : '正常' }}</template>
            </el-table-column>
            <!-- <el-table-column prop="type" label="角色类型" width="120">
                <template slot-scope="scope">{{ scope.row.type == 1 ? '寺庙' : '平台' }}</template>
            </el-table-column> -->
            <el-table-column label="操作" width="70">
                <template slot-scope="scope">
                    <el-dropdown placement="bottom-start" @command="openSet">
                        <el-button size="mini" type="primary" icon="el-icon-s-tools"></el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-role="['/umsRole/update']" :command="{ type: 'edit', item: scope.row }">编辑</el-dropdown-item>
                            <el-dropdown-item v-role="['/umsRole/update']" :command="{ type: 'toggle_status', item: scope.row }">{{ scope.row.status == 'DISABLED' ? '启用' : '禁用' }}</el-dropdown-item>
                            <el-dropdown-item v-role="['/umsRole/delete']" :command="{ type: 'del', item: scope.row }">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <br />

        <!-- 新增弹窗 -->
        <el-dialog :visible.sync="showAdd" title="新增角色">
            <add-role @onCancel="showAdd = false" @onSubmit="onAddSubmit()"></add-role>
        </el-dialog>

        <!-- 编辑弹窗 -->
        <el-dialog :visible.sync="showEdit" title="编辑角色">
            <edit-role :editItem="editItem" @onCancel="showEdit = false" @onSubmit="onEditSubmit()"></edit-role>
        </el-dialog>
    </div>
</template>

<script>
import { apiRoleList, apiRoleEdit, apiRoleDel } from "@/api/admin.js";
import addRole from "./addRole.vue";
import editRole from "./editRole.vue";
export default {
    name: 'role_index',
    components: { addRole, editRole, },
    data() {
        return {
            tableData: [],
            showAdd: false,
            showEdit: false,
            editItem: "",
        }
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            apiRoleList().then(res => {
                this.tableData = res.data;
            });
        },
        // 打开新增弹窗
        openAdd() {
            this.showAdd = true;
        },
        // 子组件确认新增
        onAddSubmit() {
            this.showAdd = false;
            this.getData();
        },
        // 设置
        openSet({ type, item }) {
            switch (type) {
                case "edit":
                    this.editItem = item
                    this.showEdit = true;
                    break;
                case "toggle_status":
                    this.toggleStatus(item);
                    break;
                case "del":
                    this.delMenu(item);
                    break;
            }
        },
        // 子组件确认编辑
        onEditSubmit() {
            this.showEdit = false;
            this.getData();
        },

        // 禁用、启用
        toggleStatus(item) {
            this.$msgbox({
                title: "温馨提示",
                message: `${item.status == 'DISABLED' ? '启用' : '禁用'}角色 ${item.name} ？`,
                showCancelButton: true,
                cancelButtonText: "取消",
                confirmButtonText: "确认",
            }).then(() => {
                apiRoleEdit({ id: item.id, status: item.status == 'DISABLED' ? 'ENABLED' : 'DISABLED' }).then((res) => {
                    this.$message({ type: "success", message: res.message });
                    this.getData();
                }).catch((err) => {
                    console.log(err);
                    this.$message({ type: "error", message: err });
                });
            }).catch(() => {
                // 点击取消
            });
        },

        delMenu(item) {
            this.$msgbox({
                title: '温馨提示',
                message: `删除角色 ${item.name} ？`,
                showCancelButton: true,
                cancelButtonText: '取消',
                confirmButtonText: '确认'
            }).then(() => {
                apiRoleDel({ id: item.id }).then((res) => {
                    this.$message({ message: '操作成功', type: 'success' })
                    this.getData()
                })
            }).catch(() => {
                // 点击取消
            })
        },

    },
}
</script>

<style></style>